<template>
    <div id="app">
        <!--顶部标题-->
        <AppHeader />
        <!--app主体-->
        <main class="app-main">
            <!--顶部输入框-->
            <InputValue :currentTab="currentTab" />
            <!--中间list列表-->
            <section class="main-body">
                <ul class="todo-list" v-if="totalCount">
                    <!--使用TodoItem组件-->
                    <ListItem
                        v-for="(item, index) in filterList"
                        :index="index"
                        :key="item.id"
                        :item="item"
                    />
                </ul>
                <!--对应空数据提示-->
                <div v-if="currentTab === 'all' && !totalCount || currentTab === 'pending' && !todoCount" :class="['list-empty', currentTab.toLowerCase()]">
                    <span>暂无数据，请添加</span>
                </div>
                <div v-if="currentTab === 'completed' && !completedCount" :class="['list-empty', currentTab.toLowerCase()]">
                    <span>暂无已完成数据</span>
                </div>
            </section>
            <!--底部工具-->
            <section class="main-footer" v-show="totalCount">
                <!--左侧计数器，将todoCount属性值传给子组件-->
                <FooterCounts :totalCount="totalCount" :todoCount="todoCount" :completedCount="completedCount" />
                <!--tab切换器-->
                <FooterTabs :currentTab="currentTab" :tabsList="tabsList" />
                <!--右侧清除工具，将completedCount属性值传给子组件-->
                <FooterClearTools :completedCount="completedCount" />
            </section>
        </main>
        <!--底部信息-->
        <AppFooter />
        <!--背景图片遮罩层-->
        <div class="bg_wrapper"></div>
    </div>
</template>

<script>
// 引入组件
import * as localforage from "localforage";
import AppHeader from './components/app-header';
import InputValue from "./components/input-value";
import ListItem from './components/list-item';
import FooterCounts from "./components/footer-counts";
import FooterTabs from "./components/footer-tabs";
import FooterClearTools from "./components/footer-clear-tools";
import AppFooter from "./components/app-footer";

export default {
    name: 'App',
    // 注册组件
    components: {
        AppHeader,
        InputValue,
        ListItem,
        FooterCounts,
        FooterTabs,
        FooterClearTools,
        AppFooter
    },
    data: function () {
        return {
            // 默认数据
            list: [],
            // 顶部全选按钮状态
            checkAllState: false,
            // 底部tabs数据
            currentTab: 'all',
            tabsList: [
                {
                    'key': 'all',
                    'name': '全部'
                },
                {
                    'key': 'pending',
                    'name': '待处理'
                },
                {
                    'key': 'completed',
                    'name': '已完成'
                },
            ]
        }
    },
    // 实例被挂载后调用
    created: function () {
        let _this = this;
        let _list = [];

        // 查询所有数据方法，接受三个参数（value, key, iterationNumber）
        localforage.iterate(function (value) {
            // 此回调函数将对所有 key/value 键值对运行
            //console.log([key, value]);

            // 保存到临时数组，因为localforage没有排序功能
            _list.push(value);
            //console.log('第' + iterationNumber + '条数据加载完成。');
        }).then(function () {
            // 对临时数组反转排序
            _list.reverse();

            // 将数据替换成临时数据
            _this.list = _list;

            console.log('全部数据加载完成');
        }).catch(function (err) {
            // 当出错时，此处代码运行
            console.log(err);
        });
    },
    // 计算属性
    computed: {
        // 过滤数据
        filterList: function () {
            // 全部时返回全部数据
            if (this.currentTab === '' || this.currentTab === 'all') {
                return this.list;
            }

            // 是否是completed选项卡
            let completed = this.currentTab === 'completed';

            return this.list.filter(item => item.completed === completed);
        },
        // 统计总条数
        totalCount: function () {
            return this.list.length;
        },
        // 待办条数
        todoCount: function () {
            return this.list.filter(item => !item.completed).length;
        },
        // 已完成条数
        completedCount: function () {
            return this.list.filter(item => item.completed).length;
        },
        // 判断是否显示顶部全选框
        showCheckAllInput: function () {
            // 根据列表数量显示顶部全选框
            if (this.currentTab === 'all' && this.totalCount > 0 && this.totalCount === this.completedCount || this.currentTab === 'completed' && this.completedCount > 0) {
                this.checkAllState = true;
            } else {
                this.checkAllState = false;
            }

            switch (this.currentTab) {
                case "all":
                    // 在当前选项卡下，且当前列表的数据为0时，隐藏全选框
                    if (this.totalCount === 0) {
                        return false;
                    }
                    break;
                case "pending":
                    // 在当前选项卡下，且当前列表的数据为0时，隐藏全选框
                    if (this.todoCount === 0) {
                        return false;
                    }
                    break;
                case "completed":
                    // 在当前选项卡下，且当前列表的数据为0时，隐藏全选框
                    if (this.completedCount === 0) {
                        return false;
                    }
                    break;
            }

            return true;
        }
    }
}
</script>
